<template>
  <view class="fm-cell-field">
    <view class="fm-cell-field__hd" :style="[{ 'width': labelWidth }]" v-if="label">
      {{ label }}
    </view>
    <view class="fm-cell-field__bd">
      <input
        v-if="mode === 'input'"
        :value="_value"
        :type="type"
        :password="password"
        :placeholder="placeholder"
        :placeholder-style="placeholderStyle"
        :placeholder-class="placeholderClass"
        :disabled="disabled"
        :maxlength="maxlength"
        :cursor-spacing="cursorSpacing"
        :auto-focus="autoFocus"
        :focus="focus"
        :confirm-type="confirmType"
        :confirm-hold="confirmHold"
        :cursor="cursor"
        :selection-start="selectionStart"
        :selection-end="selectionEnd"
        :adjust-position="adjustPosition"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @confirm="handleConfirm"
        class="fm-input"
        :class="className"
        :style="elementStyle"
      />
      <view @click="handleActionSheet" class="fm-action-sheet" v-else-if="mode === 'action-sheet'">
        <label class="fm-action-sheet-placeholder" v-if="_value === ''">{{ placeholder }}</label>
        <label v-else>{{ _value }}</label>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  name: 'FmInput',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    mode: {
      type: String,
      default: 'input',
      validator (value) {
        return [
          'input',
          'action-sheet',
          'picker'
        ].indexOf(value) > -1
      }
    },
    label: String,
    labelWidth: {
      type: String,
      default: '5em'
    },
    value: String,
    // input
    type: {
      type: String,
      default: 'text',
      validator (value) {
        return [
          'text',
          'number',
          'idcard',
          'digit'
        ].indexOf(value) > -1
      }
    },
    password: Boolean,
    placeholder: String,
    placeholderStyle: String,
    placeholderClass: {
      type: String,
      default: 'fm-input-placeholder'
    },
    disabled: Boolean,
    maxlength: {
      type: Number,
      default: 140
    },
    cursorSpacing: {
      type: Number,
      default: 0
    },
    autoFocus: Boolean,
    focus: Boolean,
    confirmType: {
      type: String,
      default: 'done',
      validator (value) {
        return [
          'send',
          'search',
          'next',
          'go',
          'done'
        ].indexOf(value) > -1
      }
    },
    confirmHold: Boolean,
    cursor: Number,
    selectionStart: {
      type: Number,
      default: -1
    },
    selectionEnd: {
      type: Number,
      default: -1
    },
    adjustPosition: {
      type: Boolean,
      default: true
    },
    // action-sheet
    options: String,
    actionSheetColor: {
      type: String,
      default: '#000000'
    },
    // 通用
    className: String,
    elementStyle: String
  },
  computed: {
    _value: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('change', val)
      }
    }
  },
  methods: {
    handleInput (evt) {
      this.$emit('input', evt.mp)
    },
    handleFocus (evt) {
      this.$emit('focus', evt.mp)
    },
    handleBlur (evt) {
      this._value = evt.mp.detail.value
      this.$emit('blur', evt.mp)
    },
    handleConfirm (evt) {
      this.$emit('confirm', evt.mp)
    },
    handleActionSheet () {
      const options = this.options
      const actionSheetColor = this.actionSheetColor
      this.$wxp.showActionSheet({
        itemList: options,
        itemColor: actionSheetColor
      }).then(res => {
        const _v = options[res.tapIndex]
        console.log(_v)
        this._value = _v
      }).catch(rej => {
        return false
      })
    },
    handlePicker (evt) {
      this._value = evt.mp.detail.value
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="less">
@import "../asset/style/_variable.less";
.fm-action-sheet,
.fm-input {
  position: relative;
  display: block;
  height: 36px;
  line-height: 36px;
  width: 100%;
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  box-sizing: border-box;
}

.fm-action-sheet-placeholder,
.fm-input-placeholder {
  color: @--color-text-placeholder;
  font-size: inherit;
}

.fm-cell-field {
  position: relative;
  display: flex;
  height: 48px;
  align-items: center;
  font-size: @--font-size-base;
  color: @--color-text-regular;

  &:not(:first-child) {
    &::before {
      .setTopLine(@--border-color-lighter);
    }
  }
}

.fm-cell-field__hd {
  flex: none;
  margin-right: 16px;
  color: @--color-text-secondary;
}

.fm-cell-field__bd {
  flex: auto;
}
</style>
